$f: 19.2;

.home {
  position: relative;
  width: 100%;
  .banner {
    width: 100vw;
    height: 700/$f+vw;
    position: relative;
    overflow: hidden;
    .swiper-slide {
      height: 100%;
      width: 100%;
      .img {
        height: 100%;
        width: 100%;
        img {
          display: block;
          height: 100%;
          width: 100%;
          object-fit: cover;
          transform: scale(1.1);
          transition: 2s cubic-bezier(0, 0, 0.68, 0.98);
        }
      }
      &.swiper-slide-active {
        .img {
          img {
            transform: scale(1);
          }
        }
      }
    }
    .swiper-pagination {
      bottom: 65/$f+vw;
      .swiper-pagination-bullet {
        width: 10/$f+vw;
        height: 10/$f+vw;
        background: rgba(255,255,255,0.5);
        border-radius: 50%;
        margin: 0 30/$f+vw;
        opacity: 1;
        position: relative;
        transition: 0.6s;
        svg {
          position: absolute;
          width: 35/$f+vw;
          height: 35/$f+vw;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          opacity: 0;
          .path-loop-bg {
            fill: none;
            stroke: transparent;
            stroke-miterlimit: 10;
            stroke-width: 1/$f+vw;
            stroke: rgba(255,255,255,0.5);
          }
          .path-loop{
              stroke-dashoffset: 157/$f+vw;
              fill: none;
              stroke: rgba(255,255,255,1);
              stroke-miterlimit: 10;
              stroke-width: 1/$f+vw;
              transition: 0.6s;
          }
        }
        &.swiper-pagination-bullet-active {
          background: rgba(255,255,255,1);
          svg {
            opacity: 1;
            .path-loop{
              animation: index_circle 3s linear forwards;
            }
          }
        }
      }
    }
  }

  .section1 {
    .wrap {
      width: 1400/$f+vw;
      margin: 0 auto;
      padding: 68/$f+vw 0 49/$f+vw;
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        width: 177/$f+vw;
        height: 33/$f+vw;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -32/$f+vw;
        clip-path: polygon(14/$f+vw 0%, 163/$f+vw 0%,100% 100%,0 100%);
        img {
          display: block;
          width: 19/$f+vw;
        }
        h1 {
          font-weight: bold;
          font-size: 20/$f+vw;
          color: #1F4B86;
          margin: 0 0 0 6/$f+vw;
        }
      }
      .l {
        width: 755/$f+vw;
        height: 241/$f+vw;
        border-radius: 6/$f+vw;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .r {
        width: 613/$f+vw;
        .text {
          margin: 0 0 20/$f+vw;
          p {
            font-weight: 400;
            font-size: 16/$f+vw;
            color: #2B2B2B;
            line-height: 27/$f+vw;
            span {
              font-size: 18/$f+vw;
              color: #1F4B86;
            }
          }
        }
        .numList {
          display: flex;
          justify-content: space-between;
          width: 613/$f+vw;
          height: 88/$f+vw;
          background: #1F4B86;
          border-radius: 8/$f+vw;
          .item {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            justify-content: center;
            .num {
              display: flex;
              align-items: flex-end;
              line-height: 1;
              p {
                font-weight: 500;
                font-size: 28/$f+vw;
                color: #FFFFFF;
              }
              span {
                font-weight: 500;
                font-size: 14/$f+vw;
                color: #FFFFFF;
                line-height: 1.4;
              }
            }
            .line {
              width: 13/$f+vw;
              height: 1/$f+vw;
              background: #FFFFFF;
              margin: 6/$f+vw 0 6/$f+vw;
            }
            h5 {
              font-weight: 400;
              font-size: 14/$f+vw;
              color: #FFFFFF;
              margin: 0;
            }
            &:not(:nth-last-child(1)) {
              &::after {
                content: "";
                width: 1/$f+vw;
                height: 19/$f+vw;
                background: #FFFFFF;
                opacity: 0.5;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
              }
            }
          }
        }
      }
    }
  }

  .part_title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1/$f+vw solid #575757;
    .part_l {
      display: flex;
      align-items: center;
      img {
        display: block;
        width: 19/$f+vw;
        margin: 0 6/$f+vw 0 0;
      }
      h1 {
        font-weight: bold;
        font-size: 20/$f+vw;
        color: #1F4B86;
        margin: 0;
      }
    }
    a {
      display: block;
      font-weight: 300;
      font-size: 12/$f+vw;
      color: #565656;
      transition: 0.6s;
      &:hover {
        color: #1F4B86;
      }
    }
  }

  .common_link {
    width: 100%;
    height: 48/$f+vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14/$f+vw 0 20/$f+vw;
    border-bottom: 1/$f+vw solid #ccc;
    .common_link_title {
      display: flex;
      align-items: center;
      .sq {
        width: 9/$f+vw;
        height: 9/$f+vw;
        position: relative;
        margin: 0 7/$f+vw 0 0;
        .sq_box {
          width: 6/$f+vw;
          height: 6/$f+vw;
          border: 1/$f+vw solid #565656;
          &:nth-child(2) {
            position: absolute;
            bottom: 0;
            right: 0;
          }
        }
      }
      h5 {
        width: 540/$f+vw;
        font-weight: 400;
        font-size: 16/$f+vw;
        color: #2B2B2B;
        white-space: nowrap;
        overflow: hidden;
        margin: 0;
        text-overflow: ellipsis;
        transition: 0.6s;
      }
    }
    p {
      font-weight: 300;
      font-size: 14/$f+vw;
      color: #565656;
      transition: 0.6s;
    }
    &:hover {
      p {
        color: #1F4B86;
      }
      .common_link_title {
        .sq {
          .sq_box {
            border: 1/$f+vw solid #1F4B86;
          }
        }
        h5 {
          color: #1F4B86;
        }
      }
    }
  }

  .section2 {
    position: relative;
    background: #f2f5f9;
    .bg {
      width: 1103/$f+vw;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        
      }
    }
    .wrap {
      width: 1400/$f+vw;
      margin: 0 auto;
      padding: 36/$f+vw 0 51/$f+vw;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 3;
      .l {
        width: 560/$f+vw;
        position: relative;
        &::after {
          content: "";
          width: 551/$f+vw;
          height: 368/$f+vw;
          background: #1F4B86;
          position: absolute;
          top: 20/$f+vw;
          left: 25/$f+vw;
        }
        .swiper {
          width: 100%;
          height: 373/$f+vw;
          overflow: hidden;
          position: relative;
          
          .swiper-slide {
            a {
              display: block;
              width: 100%;
              height: 100%;
              position: relative;
              .img {
                width: 100%;
                height: 100%;
                overflow: hidden;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: 1s;
                }
              }
              .time {
                position: absolute;
                left: 32/$f+vw;
                top: 0;
                height: 82/$f+vw;
                background: #1F4B86;
                padding: 0 10/$f+vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                p {
                  font-weight: 400;
                  font-size: 25/$f+vw;
                  color: #F2F5F9;
                  line-height: 33/$f+vw;
                  text-align: center;
                  &:nth-child(1) {
                    letter-spacing: 1.5/$f+vw;
                  }
                }
                .line {
                  width: 100%;
                  height: 2/$f+vw;
                  background: #F2F5F9;
                }
              }
              h5 {
                width: 80%;
                font-weight: 400;
                font-size: 16/$f+vw;
                color: #FFFFFF;
                transition: 0.6s;
                position: absolute;
                bottom: 23/$f+vw;
                left: 30/$f+vw;
                white-space: nowrap;
                overflow: hidden;
                margin: 0;
                text-overflow: ellipsis;
              }
              &:hover {
                .img {
                  img {
                    transform: scale(1.1);
                  }
                }
              }
            }
          }
          .btns {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            pointer-events: none;
            z-index: 3;
            padding: 0 30/$f+vw;
            .icon {
              width: 35/$f+vw;
              height: 35/$f+vw;
              background: rgba(0,0,0,0.3);
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
              transition: 0.6s;
              pointer-events: auto;
              cursor: pointer;
              img {
                width: 20/$f+vw;
              }
              &:nth-child(1) {
                transform: rotate(180deg);
              }
              &:hover {
                background: #1F4B86;
              }
            }
          }
        }
        .custom-scroll-bar {
          position: absolute;
          top: 40/$f+vw;
          right: -45/$f+vw;
          width: 3/$f+vw;
          height: 272/$f+vw;
          z-index: 9999;
          border-radius: 10px;
          background: rgba(0,0,0,0.3);     
          .scroll-thumb {
            width: 100%;
            transition: all 600ms;
            height: 33.3%;
            border-radius: 10px;
            background: #1F4B86;   
            opacity: 1 !important;
            position: relative;
            cursor: grab;
          }
        }
      }
      .r {
        width: 768/$f+vw;
        position: relative;
        .part_title {
          padding: 0 20/$f+vw 10/$f+vw;
          margin: 0 0 32/$f+vw;
        }


        .r_content {
          overflow-y: scroll;
          height: 286/$f+vw;
          position: relative;
        }
      }
    }
  }

  .section3 {
    padding: 50/$f+vw 0;
    .wrap {
      width: 1400/$f+vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .l {
        width: 842/$f+vw;
        .part_title {
          width: 100%;
          padding: 0 10/$f+vw 5/$f+vw;
          margin: 0 0 10/$f+vw;
          .part_l {
            .part_item {
              display: flex;
              align-items: center;
              cursor: pointer;
              svg {
                width: 19/$f+vw;
                margin: 0 5/$f+vw 0 0;
              }
              h1 {
                color: #565656;
                transition: 0.6s;
              }
              &.on {
                svg {
                  path {
                    fill: #1F4B86;
                  }
                }
                h1 {
                  color: #1F4B86;
                }
              }
            }
            .line {
              width: 1/$f+vw;
              height: 9/$f+vw;
              background: #565656;
              margin: 0 20/$f+vw;
              opacity: 0.6;
            }
          }
        }
        .boxes{
          .box1{
            display: none;
            justify-content: space-between;
            background: #FFFFFF;
            .big {
              padding: 10/$f+vw 0 0;
              a {
                display: block;
                width: 272/$f+vw;
                height: 279/$f+vw;
                box-shadow: 0/$f+vw 1/$f+vw 6/$f+vw 0/$f+vw rgba(5,13,9,0.2);
                padding: 10/$f+vw;
                .img {
                  width: 100%;
                  height: 168/$f+vw;
                  margin: 0 0 10/$f+vw;
                  overflow: hidden;
                  img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: 1s;
                  }
                }
                h5 {
                  font-weight: 400;
                  font-size: 16/$f+vw;
                  color: #2B2B2B;
                  line-height: 23/$f+vw;
                  margin: 0 0 15/$f+vw;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  transition: 0.6s;
                }
                p {
                  line-height: 1;
                  font-weight: 300;
                  font-size: 14/$f+vw;
                  color: #565656;
                }
                &:hover {
                  .img {
                    img {
                      transform: scale(1.1);
                    }
                  }
                  h5 {
                    color: #1F4B86;
                  }
                }
              }
            }
            .small_box {
              width: 551/$f+vw;
              .common_link {
                padding: 0 14/$f+vw 0 12/$f+vw;
                &:nth-last-child(1) {
                  border-bottom: none;
                }
                .common_link_title {
                  h5 {
                    width: 330/$f+vw;
                  }
                }
              }
            }
          }
          .on {
            display: flex;
          }
        }
      }
      .r {
        width: 525/$f+vw;
        .part_title {
          padding: 0 10/$f+vw 5/$f+vw;
          margin: 0 0 15/$f+vw;
          h1 {
            color: #1F4B86;
          }
        }
        .common_link {
          padding: 0 14/$f+vw 0 12/$f+vw;
          &:nth-last-child(1) {
            border-bottom: none;
          }
          .common_link_title {
            h5 {
              width: 330/$f+vw;
            }
          }
        }
      }
    }
  }

  .section4 {
    .wrap {
      width: 1450/$f+vw;
      margin: 0 auto;
      .part_title {
        width: 1430/$f+vw;
        margin: 0 auto 30/$f+vw;
        padding: 0 13/$f+vw 5/$f+vw;
      }
      .box {
        position: relative;
        .btns {
          width: 1523/$f+vw;
          position: absolute;
          top: 120/$f+vw;
          left: 50%;
          transform: translate(-50%,0);
          display: flex;
          align-items: center;
          justify-content: space-between;
          pointer-events: none;
          z-index: 3;
          .icon {
            width: 35/$f+vw;
            height: 35/$f+vw;
            background: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: 0.6s;
            pointer-events: auto;
            cursor: pointer;
            img {
              width: 20/$f+vw;
            }
            &:nth-child(1) {
              transform: rotate(180deg);
            }
            &:hover {
              background: #1F4B86;
            }
          }
        }
      }
      .swiper_box {
        width: 100%;
        overflow: hidden;
        .sec4_swiper {
          width: 1430/$f+vw;
          margin: 0 auto;
          padding: 20/$f+vw 10/$f+vw 70/$f+vw;
          .swiper-slide {
            width: 340/$f+vw;
            height: 259/$f+vw;
            .item {
              width: 328/$f+vw;
              height: 236/$f+vw;
              background: #FFFFFF;
              box-shadow: 0/$f+vw 1/$f+vw 6/$f+vw 0/$f+vw rgba(5,13,9,0.2);
              transition: 0.6s;
              padding: 10/$f+vw;
              margin: 0 auto;
              .img {
                width: 100%;
                height: 171/$f+vw;
                overflow: hidden;
                margin: 0 0 19/$f+vw;
                transition: 0.6s;
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
              p {
                font-weight: 500;
                font-size: 16/$f+vw;
                color: #2B2B2B;
                text-align: center;
                transition: 0.6s;
              }
              &:hover {
                background: #1F4B86;
                width: 359/$f+vw;
                height: 259/$f+vw;
                transform: translateX(-10/$f+vw);
                .img {
                  height: 188/$f+vw;
                }
                p {
                  font-weight: bold;
                  font-size: 18/$f+vw;
                  color: #FFFFFF;
                }
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    .banner {
      margin: 60px 0 0;
      .swiper-pagination {
        .swiper-pagination-bullet {
          width: 8px;
          height: 8px;
          svg {
            display: none;
          }
        }
      }
    }
    .section1 {
      .wrap {
        width: 90%;
        display: block;
        padding: 30px 0;
        .title {
          width: auto;
          height: auto;
          clip-path: unset;
          background: unset;
          position: unset;
          justify-content: flex-start;
          margin: 0 0 20px;
          img {
            width: 19px;
            margin: 0 5px 0 0;
          }
          h1 {
            font-size: 20px;
          }
        }
        .l {
          width: 100%;
          height: 33.8vw;
          border-radius: 6px;
          margin: 0 0 15px;
        }
        .r {
          width: 100%;
          .text {
            p {
              font-size: 16px;
              line-height: 1.6;
              span {
                font-size: 18px;
              }
            }
          }
          .numList {
            width: 100%;
            height: auto;
            flex-wrap: wrap;
            justify-content: flex-start;
            border-radius: 6px;
            padding: 5px 0;
            .item {
              width: 33.333%;
              padding: 10px 0;
              .num {
                p {
                  font-size: 24px;
                }
                span {
                  font-size: 12px;
                  margin: 0 0 0 2px;
                }
              }
              .line {
                width: 15px;
                height: 1px;
                margin: 8px 0;
              }
              h5 {
                font-size: 16px;
              }
              &:not(:nth-last-child(1)) {
                &::after {
                  width: 1px;
                  height: 15px;
                }
              }
            }
          }
        }
      }
    }
    .part_title {
      padding: 0 5px 5px !important;
      margin: 0 0 10px !important;
      .part_l {
        img {
          width: 19px;
          margin: 0 5px 0 0;
        }
        h1 {
          font-size: 20px;
        }
      }
      a {
        font-size: 16px;
      }
    }
    .common_link {
      height: 45px;
      .common_link_title {
        .sq {
          width: 9px;
          height: 9px;
          position: relative;
          margin: 0 7px 0 0;
          .sq_box {
            width: 6px;
            height: 6px;
            border: 1px solid #565656;
            &:nth-child(2) {
              position: absolute;
              bottom: 0;
              right: 0;
            }
          }
        }
        h5 {
          font-size: 16px;
          width: 60vw !important;
        }
      }
      p {
        font-size: 14px;
      }
    }
    .section2 {
      .bg {
        width: 80vw;
      }
      .wrap {
        width: 90%;
        display: block;
        padding: 30px 0;
        .l {
          width: 100%;
          &::after {
            display: none;
          }
          .swiper {
            height: 60vw;
            margin: 0 0 20px;
            .btns {
              padding: 0 10px;
              .icon {
                width: 30px;
                height: 30px;
                img {
                  width: 18px;
                }
              }
            }
            .swiper-slide {
              a {
                .time {
                  height: auto;
                  padding: 5px 10px;
                  p {
                    font-size: 16px;
                    line-height: 1.6;
                  }
                }
                h5 {
                  width: 90%;
                  left: 5%;
                  bottom: 15px;
                  font-size: 16px;
                }
              }
            }
          }
        }
        .r {
          width: 100%;
          .r_content {
            height: auto;
          }
        }
      }
    }
    .section3 {
      .wrap {
        width: 90%;
        display: block;
        padding: 30px 0;
        .l,.r {
          width: 100%;
        }
        .l {
          margin: 0 0 20px;
          .part_title {
            .part_l {
              .part_item {
                margin: 0 10px 0 0;
                svg {
                  width: 19px;
                  margin: 0 5px 0 0;
                }
              }
            }
          }
          
          .boxes{
            .box1{
              flex-direction: column;
              .big {
                width: 100%;
                margin: 0 0 15px;
                a {
                  width: 100%;
                  height: auto;
                  padding: 10px;
                  box-shadow: 0vw 0.0520833333vw 5px 0vw rgba(5, 13, 9, 0.2);
                  .img {
                    height: 61.55vw;
                    margin: 0 0 10px;
                  }
                  h5 {
                    font-size: 16px;
                    line-height: 1.4;
                    margin: 0 0 5px;
                  }
                  p {
                    font-size: 14px;
                  }
                }
              }
              .small_box {
                width: 100%;
              }
            }
          }
        }
      }
    }
    .custom-scroll-bar {
      display: none;
      
    }
    .section4 {
      .wrap {
        width: 90%;
        .part_title {
          width: 100%;
        }
        .box {
          width: 100%;
          .btns {
            justify-content: center;
            top: unset;
            bottom: 30px;
            .icon {
              width: 30px;
              height: 30px;
              margin: 0 10px;
              img {
                width: 18px;
              }
            }
          }
          .swiper_box {
            width: 100%;
            .sec4_swiper {
              width: 100%;
              padding: 15px 0 80px;
              .swiper-slide {
                height: auto;
                .item {
                  width: 100% !important;
                  height: auto !important;
                  padding: 10px;
                  background: #1F4B86;
                  .img {
                    width: 100%;
                    height: 50vw;
                    margin: 0 0 15px;
                  }
                  p {
                    font-size: 16px !important;
                    color: #FFFFFF;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@keyframes index_circle {
  0% {
      stroke-dashoffset: 157/$f+vw;
  }
  100% {
      stroke-dashoffset: 19/$f+vw;
  }
}
